import React, { Component } from 'react'
import styles from './index.less'
import { Tag, Icon, Input, Button, Modal, Divider, Collapse, Tooltip, Popconfirm } from 'antd';
import { connect } from 'dva'
const { Panel } = Collapse;


@connect(({ smsTheme, loading }) => ({ 
    smsRecordList: smsTheme.smsRecordList,
    successList: smsTheme.successList,
    errList: smsTheme.errList,
    noReceipt: smsTheme.noReceipt,
    noReply: smsTheme.noReply

}))
export default class GroupDetailView extends Component {

    state = {
        refresh: false,
        idList:[]
    }

    callback = (e)=>{
        console.log("calback", e)
    }

    confirm = (event)=>{
        event.stopPropagation();
        const { idList } = this.state
        console.log("123", idList)
        const { dispatch, handleCancel } = this.props
        dispatch({
            type: 'smsTheme/fetchReSendSmsTheme',
            payload: {
                smsRecordIds: idList
            }
        })
        handleCancel()
    }

    cancel = (event)=>{
        event.stopPropagation();
    }

    genExtra = (list)=>{
        if(list.length > 0){
            let idList = list.map((item)=>{
                return item.id
            })
            return (
                <Popconfirm 
                    title="是否重新发送？"
                    onConfirm={this.confirm}
                    onCancel={this.cancel}
                    okText="是"
                    cancelText="否">
                    <Icon
                        type="retweet"
                        style={{fontSize:25}}
                        onClick={(event) => {
                            event.stopPropagation();
                            console.log(idList)
                            this.setState({
                                idList: idList
                            })
                        }}
                    />
                </Popconfirm>
            )
        }
    }

    getTelNumList = (list)=>{
        return list.map((item)=>{
               return <Tag key={item.id}>{item.telnum}</Tag>
        })
    }

    render() {
        const { modalIsShow } = this.props.pState
        const {handleOk, smsRecordList, successList, errList, noReceipt, noReply} = this.props

        return (
            <div>
                <Modal
                    title={"群发详情"}
                    visible={modalIsShow}
                    onOk={handleOk}
                    onCancel={this.handleCancel}
                    width={'80%'}
                    okText="确认"
                    cancelText="取消">
                    <Collapse 
                        defaultActiveKey={['1','2','3','4']} 
                        onChange={this.callback}>
                        <Panel header="成功发送" key="1" extra={this.genExtra(successList)}>
                        <div>{this.getTelNumList(successList)}</div>
                        </Panel>
                        <Panel header="网关回执失败" key="2" extra={this.genExtra(errList)}>
                        <div>{this.getTelNumList(errList)}</div>
                        </Panel>
                        <Panel header="网关无回执" key="3" extra={this.genExtra(noReceipt)}>
                        <div>{this.getTelNumList(noReceipt)}</div>
                        </Panel>
                        <Panel header="用户未回复" key="4" extra={this.genExtra(noReply)}>
                        <div>{this.getTelNumList(noReply)}</div>
                        </Panel>
                    </Collapse>
                </Modal>
            </div>
        )
    }

    handleCancel = ()=>{
        this.setState({
            refresh: false
        })
        const {handleCancel} = this.props
        handleCancel();
    }

    componentDidUpdate(){
        const { refresh } = this.state
        const { modalIsShow, selectedGroupId } = this.props.pState
        const { dispatch } = this.props
        if(modalIsShow && !refresh){         
            dispatch({
                type: 'smsTheme/fetchSelSmsThemeDetails',
                payload: {id: selectedGroupId}
            })
            this.setState({
                refresh: true
            })
        }
    }

}
